/**
 * 创建于：2016-5-23
 * 创建人：杨骐彰
 * 说明：按钮组件样式
 */
@import "../../styles/variables";

.sem-button {
  $color-primary: #ff595f;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: $form-control-height;
  text-align: center;
  line-height: $form-control-height - 0.125rem;
  background-color: $color-primary;
  border: solid 1px $color-primary;
  padding: 0 1rem;
  -webkit-border-radius: 4px;
  border-radius: .25rem;
  vertical-align: middle;
  outline: none;
  font-size: .875rem;
  color: #ffffff;
  //-webkit-transition: all .15s ease;
  //transition: all .15s ease;
  &.thin {
    height: $form-control-height-thin;
    line-height: $form-control-height-thin;
    font-size: .75rem;
  }
  &.disabled{
    background-color: #dfdfdf;
    border-color: #dfdfdf;
    cursor: not-allowed;
    &:hover {
      background-color: #dfdfdf;
      border-color: #dfdfdf;
    }
  }
  &:hover {
    background-color: darken($color-primary, 5%);
    border-color: darken($color-primary, 5%);
  }

  &:active {
    background-color: darken($color-primary, 10%);
    border-color: darken($color-primary, 20%);
  }

  //空心button
  &.outline {
    background: #fff;
    border-color: $color-primary;
    color: #000;
  }

  &.outline {
    &:hover {
      color: darken($color-primary, 5%);
    }

    &:active {
      color: darken($color-primary, 10%);
    }
  }
  &.has-add-on {
    position: relative;
    padding-left: 1.875rem;
    .add-on {
      position: absolute;
      height: 1rem;
      width: 1rem;
      top: 50%;
      margin-top: -.5rem;
      left: .5rem;
      background-size: cover;
    }
  }
}
